// 搜索框
// 发送Ajax的函数
function requestData () {
  $.ajax({
    url: 'https://www.ymatou.com/products/api/getPreKeywordList',
    dataType: 'jsonp',
    data: {
      callback: 'jQuery1124011554513085737117_1635659513597',
      query: $('#search').val(),
      _: +new Date()
    },
    success: res => {
      var keywords = res.result.Keywords
      // console.log(keywords)
      // 把ul置空
      $('.sousuoxia').empty()
      // 如果数据不存在了，那返回
      if (!keywords) {
        return false
      }
      // 渲染li
      var str = ''
      keywords.forEach(item => {
        str += `
          <li>${item}</li>
        `
      })
      // ul显示
      $('.sousuoxia').stop().show()
      // 把str的数据放在ul里
      $('.sousuoxia').html(str)
      // 点击li的时候，把li的值放在搜索框里
      $('.sousuoxia>li').on('click', function () {
        $('#search').val($(this).text())
      })
    }
  })
}
// 当搜索框是输入状态的时候
$('#search').on('input', function () {
  // 如果搜索框里的值是空，那么ul数据为空并隐藏
  if ($(this).val() === '') {
    $('.sousuoxia').text('').hide()
    return false
  }
  // 调用Ajax
  requestData()
  return false
})
// 获取焦点请求数据
$('#search').on('focus', function () {
    // 如果搜索框里的值是空，那么ul数据为空并隐藏
  if ($(this).val() === '') {
    $('.sousuoxia').text('').hide()
    return false
  }
  //调用Ajax，请求数据
  requestData()
})
// 失去焦点隐藏搜索结果
$('#search').on('blur', function () {
  //设置定时器，200毫秒以后隐藏
  setTimeout(function () {
    $('.sousuoxia').hide()
  }, 200)
})